<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data="menuData" row-key="id"
      :expand-row-keys="['1', '2']" dataKey='' :pagination="false" :init-param="initParam" :indent="36">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <SButton :buttonProps="{ type: 'primary' }" buttonText="新增" contentType="both" icon="CirclePlus"
          @click="openDialog('新增')" />
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.icon"></component>
        </el-icon>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <SButton :buttonProps="{ type: 'primary', link: true }" buttonText="编辑" @click="openDialog('编辑', scope.row)" />

        <SButton :buttonProps="{ type: 'primary', link: true }" buttonText="删除" @click="confirmDelete(scope.row)" />
      </template>
    </ProTable>

    <MenuDialog ref="menuDialogRef" :title="dialogTitle" :rowData="selectedRow" v-model:visible="dialogVisible"
      @refresh="proTable?.getTableList" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import SButton from "@/components/SButton/index.vue";
import MenuDialog from "./modules/MenuDialog.vue"
import { addMenu, deleteMenu, editMenu, menuList } from "@/api/basic/menu";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox } from "element-plus";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
const menuData = ref()
const getMenuList = (initParam) => {

  menuList(initParam).then(res => {
    if (res.length) {
      menuData.value = res
    } else {
      menuData.value = []
    }
  })

  return menuData.value
};

const getTableList = (params: any) => {
  return getMenuList(params)
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons();
onMounted(async () => {

});

// 表格配置项
const columns = reactive<ColumnProps<any>[]>([
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "menuName",
    label: "菜单名称",
    search: { el: "input" },
    width: 300
  },
  {
    prop: "cacheCode",
    label: "缓存标识",
  },
  {
    prop: "icon",
    label: "菜单图标",
  },
  {
    prop: "orderNum",
    label: "排序",
  },
  {
    prop: "menuType",
    label: "菜单类型",
    render: (scope: any) => {
      return <span>{scope.row.menuType === 'M' ? '目录' : scope.row.menuType === 'C' ? '菜单' : '按钮'}</span>
    }
  },
  {
    prop: "url",
    label: "路径地址",
  },
  {
    prop: "cache",
    label: "缓存",
    render: (scope: any) => {
      return <span>{scope.row.cache == '0' ? '否' : scope.row.cache == '1' ? '是' : '未知'}</span>
    }
  },
  {
    prop: "visible",
    label: "隐藏",
    render: (scope: any) => {
      return <span>{scope.row.visible == '0' ? '否' : scope.row.visible == '1' ? '是' : '未知'}</span>
    }
  },
  {
    prop: "dataPermission",
    label: "数据权限",
    render: (scope: any) => {
      return <span>{scope.row.dataPermission == '0' ? '否' : scope.row.dataPermission == '1' ? '是' : '否'}</span>
    }
  },
  {
    prop: "createTime",
    label: "创建时间",
    width: 200
  },
  { prop: "operation", label: "操作" }
]);

// 打开 dialog(新增、查看、编辑)
const dialogTitle = ref('');
const dialogVisible = ref(false);
const selectedRow = ref<Partial<any>>({});
const menuDialogRef = ref<InstanceType<typeof menuDialogRef> | null>(null);

const openDialog = (title: string, row: Partial<any> = {}) => {
  dialogTitle.value = title;
  selectedRow.value = row;
  dialogVisible.value = true;
  menuDialogRef.value?.acceptParams({
    title,
    isView: title === '详情',
    row,
    api: title === '新增' ? addMenu : editMenu,
    getTableList: proTable.value?.getTableList,
    allData: menuData.value,
  });
};

//删除菜单
const confirmDelete = (row: any) => {
  ElMessageBox.confirm("确定删除该菜单吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await deleteMenu(row.id);
    getMenuList(initParam);
    ElMessage.success("删除菜单成功");
  })
}


</script>
